<template>
  <div class="home">
    <h1>Home Page</h1>
    <DynamicComp ref="comp" msg="hello dynamic component" v-on:update="getMes"></DynamicComp>
    <div id="app2"></div>
  </div>
</template>

<script>
import Vue from "vue";
import Item from "@/components/Item.vue";
import VirtualList from "vue-virtual-scroll-list";
import count from "utils";
import DynamicComp from "@/components/DynamicComp.vue";

const items = new Array(3000)
  .fill(0)
  .map((item, i) => ({ uid: i, url: `http://127.0.0.1:3000/${i + 1}.jpg` }));

export default {
  name: "HomeView",
  components: {
    VirtualList,
    DynamicComp,
  },
  methods:{
    getMes(data){
      console.log(data)
    }
  },
  mounted() {
    console.log(this.$refs.comp)
    const that = this;
    
    const Ctor = Vue.extend(DynamicComp);
    const instance = new Ctor({
      propsData: {
        msg: "dynamic msg",
        onUpdate: that.getMes
      },

    });
    instance.$mount(document.querySelector("#app2"));
  },
  data() {
    return {
      Item,
      items,
    };
  },
};
</script>
